<template>
  <div class="theme">
    <el-row>
      <el-col class="col-mid" :span="8">
        <pieChart
          ref="pieData1"
          v-if="Object.keys(themepieData.themepieData1).length > 0"
          :pieData="themepieData.themepieData1"
          :width="width"
          :height="height"
        />
      </el-col>
      <el-col class="col-mid" :span="8">
        <pieChart
          ref="pieData2"
          v-if="Object.keys(themepieData.themepieData2).length > 0"
          :pieData="themepieData.themepieData2"
          :width="width"
          :height="height"
        />
      </el-col>
      <el-col class="col-mid" :span="8">
        <circleChart
          ref="pieData3"
          v-if="themepieData.themepieData3.length > 0"
          :pieData="themepieData.themepieData3"
          :width="width"
          :height="height"
          :title="title"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import pieChart from "@/views/home/theme/components/pieChart.vue";
import circleChart from "@/views/home/theme/components/circleChart.vue";
export default {
  components: {
    pieChart,
    circleChart,
  },
  name: "theme",
  props: {
    themepieData: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "180px",
    },
    title: {
      type: String,
      default: "能源资源库",
    },
  },
  data() {
    return {
      // pieData1: {}, // 能耗管理标准库
      // pieData2: {}, // 能耗物联组织库
      // pieData3: [], // 能耗物联组织库
    };
  },
  created() {},
  mounted() {},
  // watch: {
  //   themepieData: {
  //     handler(val) {
  //       if (val) {
  //         this.getDataone();
  //         this.getDatatwo();
  //         this.getDatathree();
  //       }
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  methods: {},
};
</script>

<style scoped lang="scss">
.theme {
  min-height: 180px;
  width: 100%;
}
</style>
